<template>
  <div class="projectDepart">
    <div class="title">部门</div>
    <div class="mainInfo">
      <div class="add">
        <div class="addbtn" @click="openAddProjectDepart">添加</div>
      </div>
      <table border="0" cellspacing="0" cellpadding="0" class="table">
        <thead class="thead">
          <th>序号</th>
          <th>部门类型名称</th>
          <th>部门描述</th>
          <th>操作</th>
        </thead>
        <tbody v-if="this.$store.state.projectDepartment.total" class="tbody">
          <tr
            v-for="(item, index) in this.$store.state.projectDepartment
              .tableData"
            :key="item.webDeptId"
          >
            <td>{{ index >= 9 ? index + 1 : "0" + (index + 1) }}</td>
            <td>{{ item.webDeptName }}</td>
            <td>{{ item.webDeptRemark }}</td>
            <td>
              <span class="write" @click="writeProjectDepart(item.webDeptId)"
                >编辑</span
              >
              <span class="delete" @click="deleteProjectDepart(item)"
                >删除</span
              >
            </td>
          </tr>
        </tbody>
      </table>
      <div class="block" v-if="this.$store.state.projectDepartment.total">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="this.$store.state.projectDepartment.total"
        ></el-pagination>
      </div>
      <!-- 当表头为空时 -->
      <div class="empty" v-if="!this.$store.state.projectDepartment.total">
        <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
        <span>空空如也</span>
      </div>
    </div>
    <delete-alert-box
      v-if="isShowDelete"
      :isDelete="isDelete"
      :descTips="descTips"
      @Confirm="Confirm"
      @Cancel="Cancel"
    ></delete-alert-box>
  </div>
</template>

<script>
import { deleteDepart } from '@/api/projectDepartment'

export default {
  data () {
    return {
      pageIndex: 1,
      currentPage: 1,
      webDept: '',
      descTips: [],
      isDelete: false,
      deleteId: '',
      isShowDelete: false
    }
  },
  methods: {
    async getTable () {
      if (this.pageIndex > 1 && this.$store.state.projectDepartment.tableData.length < 2) {
        this.pageIndex = this.pageIndex - 1
      }
      await this.$store.dispatch(
        'projectDepartment/updateTable',
        this.pageIndex
      )
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.pageIndex = val
      this.getTable()
    },
    // 删除
    async deleteProjectDepart (item) {
      this.deleteId = item.webDeptId
      if (!item.isRelate) {
        this.descTips = [
          {
            tips: `确定删除"${item.webDeptName}"？`,
            subTips: '删除之后，部门相关数据也会被删除。',
            default: ''
          }
        ]
        this.isDelete = true
      } else {
        this.descTips = [
          {
            tips: `已有项目使用"${item.webDeptName}"这个角色，无法删除。`,
            default: ''
          }
        ]
        this.isDelete = false
      }
      this.isShowDelete = true
    },
    async Confirm () {
      deleteDepart(this.deleteId).then(res => {
        if (res.data.code === 999) {
          this.deleteMsg = res.data.message
        } else if (res.data.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          this.isShowDelete = false
          this.getTable()
        }
      })
    },
    Cancel () {
      this.isShowDelete = false
      // console.log('取消')
    },
    // 添加部门
    openAddProjectDepart () {
      window.sessionStorage.removeItem('webDeptId')
      this.$router.push({
        path: '/addProjectDepart'
      })
    },
    // 编辑部门
    writeProjectDepart (webDeptId) {
      sessionStorage.setItem('webDeptId', webDeptId)
      this.$router.push({
        path: '/addProjectDepart'
      })
    }
  },
  created () {
    this.getTable()
  },
  components: {}
}
</script>

<style scoped lang="scss">
.projectDepart {
  overflow-y: auto;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0 30px 30px;
  .title {
    margin-top: 29px;
    width: 100%;
    background-color: #f2f2f2;
    height: 61px;
    font-size: 24px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 33px;
  }
  .mainInfo {
    position: relative;
    width: 100%;
    min-height: calc(100% - 90px);
    background-color: #fff;
    // height: 780px;
    .add {
      position: relative;
      height: 90px;
      border-bottom: 1px solid #f2f2f2;
      .addbtn {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
        width: 108px;
        height: 42px;
        background: rgba(72, 104, 255, 1);
        border-radius: 21px;
        font-size: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 42px;
        text-align: center;
      }
    }
    .table {
      width: 100%;
      padding: 0 30px;
      margin-top: 20px;
      background-color: #fff;
      .thead {
        background: rgba(87, 131, 255, 0.05);
        font-size: 14px;
        font-weight: 500;
        th {
          color: rgba(51, 51, 51, 1);
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: solid 1px rgba(230, 230, 230, 1);
        }
      }
      .tbody {
        height: calc(100% - 60px);
        tr {
          height: 64px;
          td {
            color: #666666;
            font-size: 14px;
            max-width: 200px;
            font-weight: 400;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
            padding-left: 24px;
            border-bottom: rgba(242, 242, 242, 1) 1px solid;
            .descOfDeviceType::after {
              content: "、";
            }
            .descOfDeviceType:last-child::after {
              content: "";
            }
            .write {
              float: left;
              cursor: pointer;
              font-size: 14px;
              font-weight: 500;
              color: rgba(72, 104, 255, 1);
              text-decoration: underline;
            }
            .delete {
              float: left;
              cursor: pointer;
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
              color: rgba(251, 70, 70, 1);
              text-decoration: underline;
            }
            span {
              float: left;
            }
          }
        }
      }
    }
    .block {
      padding: 24px 0;
      margin-right: 28px;
      overflow: hidden;
      ::v-deep .el-pagination {
        float: right;
      }
    }

    .empty {
      position: relative;
      .emptyLogo {
        position: absolute;
        top: 156px;
        left: 50%;
        transform: translateX(-50%);
        width: 240px;
        height: 240px;
      }
      span {
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        position: absolute;
        top: 408px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .deleteBox {
      position: fixed;
      top: 150px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      width: 560px;
      height: 360px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
    }
  }
}
</style>
